window.onload = function () {
    //获取放大镜遮罩层
    var fadZz = document.getElementsByClassName('big-box-zz')[0];
    //获取放大镜大图
    var bigImg = document.getElementsByClassName('big-box')[0];
    //获取放大镜小图
    var smallImg = document.gt('big-box')[0];
    var fdj = document.getElementsByClassName('fdj')[0];
    //获取小图的宽度与高度
    var w = smallImg.offsetWidth;
    var h = smallImg.offsetHeight;
    //计算大图的宽度与高度
    bigImg.lastElementChild.style.width = w * 2.5 + 'px';
    bigImg.lastElementChild.style.height = h * 2.5 + 'px';
    bigImg.style.right = -w - 2 + 'px';
    fdj.style.width = w / 2.5 + 'px';
    fdj.style.height = w / 2.5 + 'px';

    fadZz.onmouseover=function(e){
        var e=e|| window.event;
        //当鼠标经过时让fdj显示
        fdj.style.display="block";
        bigImg.style.visibility="visible";

    }
    //鼠标移动事件
    fadZz.onmousemove=function(e){
        //当鼠标移动时获取鼠标相对于当前div的距离
        var e=e||window.Event;
        console.log(e.offsetX);
        fdj.style.left=e.offsetX-fdj.offsetWidth/2+'px';
        bigImg.lastElementChild.style.left=-fdj.offsetLeft*2.5+'px';
        bigImg.lastElementChild.style.top=-fdj.offsetTop*2.5+'px';
        fdj.style.left=e.offsetX-fdj.offsetWidth/2+'px';
        fdj.style.top=e.offsetY-fdj.offsetHeight/2+'px';
        if(e.offsetX<=fdj.offsetWidth/2){
            fdj.style.left="0px";
        }
        if(e.offsetX>=w-fdj.offsetWidth/2){
            fdj.style.left=w-fdj.offsetWidth+'px';
        }
        if(e.offsetY<=fdj.offsetHeight/2){
            fdj.style.top="0px";
        }
        if(e.offsetY>=w-fdj.offsetHeight/2){
            fdj.style.top=w-fdj.offsetHeight-2+'px';
        }
    };
    fadZz.onmouseout=function(){
        //当鼠标经过时让fdj显示
        fdj.style.display="none";
        bigImg.style.visibility="hidden";
    }
}